<template>
  <div id="nav">
      <router-link v-for="item in naArr" :key="item.id" :to="item.path">
          <div>
              <span class="iconfont" :class="item.icon"></span>
          </div>
          <div>
              {{item.name}}
          </div>
      </router-link>
  </div>
</template>

<script>
export default {
name:"myfooter",
data:function(){
    return{
        naArr:[
            {id:1,path:"/hot",name:"电影/影院",icon:"icon-dianyingyuan"},
             {id:2,path:"/video",name:"视频",icon:"icon-shipin1"},
              {id:3,path:"/shortvideo",name:"小视频",icon:"icon-shipin"},
               {id:4,path:"/show",name:"演出",icon:"icon-yanchu"},
                {id:5,path:"/login",name:"我的",icon:"icon-my"}
        ]
    }
}
}
</script>

<style>
@import url('//at.alicdn.com/t/font_2636523_2lbu9x4mkom.css');
* {
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
}
#nav {
 width: 100%;
 height: 50px;
 position: fixed;
 bottom: 0;
 left: 0;
 border: 1px solid #ccc;
 display: flex;
 justify-content: space-around;
 /* line-height: 80px; */
 text-align: center;
 background: #fff;
}

#nav a {
  /* font-size: 12px; */
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #f03d37;
}
</style>